<template>
  <div v-if="iv" class="container">
    <div class="top-part">
      <pinCell
        v-if="pinInfo&&userID"
        class="no-box-shadow"
        :pinID="pinInfo.pinID"
        :startTime="pinInfo.departureTime"
        :endTime="pinInfo.arrivalTime"
        :startPoint="pinInfo.startPoint"
        :endPoint="pinInfo.endPoint"
        :userName="pinInfo.leaderName"
        :publishTime="pinInfo.publishTime"
        :totalPassengers="pinInfo.totalPassengers"
        :joinedPassengers="pinInfo.joinedPassengers"
		:userID="userID"
		:plusButton="true"
      />
    </div>

    <ChatSection v-if="pinID" :currentUser="userID" :pinId="pinID"/>
  </div>
</template>


<script>
import pinCell from '../../components/pinCell.vue';
import ChatSection from "../../components/chat/chat.vue";
import { PinlistAPI,UserAPI ,getUserInfo,OrderAPI} from '../../services/api'; // 引入 PinlistAPI
import { fetchPinInfo} from '../../services/pin'; // 引入 fetchPinInfo

export default {
  components: {
    pinCell,
    ChatSection,
  },
  data() {
    return {
      message: '', // 用于存储输入框中的消息
      messages: [], // 存储所有发送的消息
      userID: null, // 用于存储获取到的用户 ID
      pinID: null,  // 用于存储获取到的 pinID
      pinInfo : null, // 用来存储拼车信息
	  iv: false,
    };
  },
  async onLoad(options) {
    // 获取 URL 中的参数 pinID
	
    if (options.pinID) {
      this.pinID = options.pinID; // 将 pinID 存储到 data 中
	  console.log("pinID",this.pinID);
		// 获取拼车信息
	  this.pinInfo=await fetchPinInfo(this.pinID); // 调用 fetchPinInfo 方法
	  console.log("Asdfasdfasdfasdf",this.pinInfo);
    }
  },
  async created() {
    // 在组件创建时获取用户信息
	this.iv=await OrderAPI.fetchOrderData();
	await this.fetchUserInfo();
  },
  methods: {
    async fetchPinInfo(pinID) {
      try {
        console.log(pinID);
        const response = await PinlistAPI.getPinById(pinID); // 调用接口获取拼车信息
        let pinInfo_tmp = response; // 存储返回的数据
		pinInfo_tmp.leaderName=(await UserAPI.getUserById(pinInfo_tmp.leader))['username']
		this.pinInfo=pinInfo_tmp;
        console.log('Fetched Pin Info:', this.pinInfo);
      } catch (error) {
        console.error('Failed to fetch pin info:', error);
      }
    },
	
    async fetchUserInfo() {
      try {
        const userInfo = await getUserInfo(); // 获取用户信息
        this.userID = userInfo.userID; // 存储 userID
        console.log('Fetched User Info:', userInfo);
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    },
  }
};
</script>


<style scoped>

.container {
  width: 100%;
  height: 100vh; /* 页面高度填满屏幕 */
  padding: 0%;
  display: flex;
  flex-direction: column;
  background-color: white; /* 背景透明 */
  overflow: hidden; /* 防止整个页面滚动 */
  touch-action: none;
}

.top-part {
  flex-shrink: 0;
  background-color: white; /* 背景透明 */
  padding: 0px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  width: 100%;  /* 宽度占满父容器 */
  max-width: 400px;  /* 限制最大宽度*/
  margin-left: auto;  /* 左右居中 */
  margin-right: auto;
  text-align: center;
  z-index: 1;
  box-sizing: border-box;
  
}
.top-part + * {
  margin-top: 0;  /* 使下一个组件紧挨着 top-part */
  flex-grow: 1;  /* 保证其他组件填满剩余空间 */
}

.bottom-part {
  height: 75%; /* 下部分占60% */
  background-color: white; /* 白色背景 */
  display: flex;
  flex-direction: column; /* 让消息和输入框垂直排列 */
  justify-content: flex-end; /* 保证消息列表和输入框位于底部 */
  padding: 5px;
}

.messages-list {
  padding: 10px;
  overflow-y: auto;
  flex-grow: 1; /* 让消息部分占据剩余空间 */
  display: flex;
  flex-direction: column; /* 改为 column，使新消息在旧消息下方显示 */
  margin-bottom: 10px; /* 给消息列表与输入框之间留点空间 */
}
/* 使用 ::v-deep 强制修改内部样式 */
.no-box-shadow >>> .ride-card {
  box-shadow: none;  /* 移除阴影 */
}

.message-wrapper {
  display: flex;
  justify-content: flex-end; /* 使每个消息组件右对齐 */
}

.message-input-container {
  width: 100%;
  max-width: 500px; /* 限制输入框的最大宽度 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  background-color: #f0f0f0;
  border-radius: 25px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.message-input {
  width: 80%;
  padding: 8px;
  height: 35px;
  border-radius: 25px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: #fff;
}

.send-button {
  background-color: black;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
}

.send-button:hover {
  background-color: #444;
}

</style>
